<template>
  <div class="Layout">
    <div class="Minortitle">animation-fill-mode</div>
    <div id="example" class="Divide-2">
      <div>#1-none</div>
      <div id="div-1" class="div animation"></div>
      <div>#2-forwards</div>
      <div id="div-2" class="div animation"></div>
      <div>#3-backwards</div>
      <div id="div-3" class="div animation"></div>
      <div>#4-both</div>
      <div id="div-4" class="div animation"></div>
    </div>
    <div class="Divide-2 Code">.animation {
  animation: move 3s 1s;
}
#div-1 {
  animation-fill-mode: none;
}
#div-2 {
  animation-fill-mode: forwards;
}
#div-3 {
  animation-fill-mode: backwards;
}
#div-4 {
  animation-fill-mode: both;
}
@keyframes move {
  from {
    transform: translateX(0);
    background-color: orange;
  }
  to {
    transform: translateX(300px);
    background-color: pink;
  }
}
  </div>
</template>

<style>
  .div {
    width: 100px;
    height: 100px;
    margin-bottom: 2rem;
    background-color: skyblue;
  }

  .animation {
    animation: move 3s 1s;
  }

  #div-1 {
    animation-fill-mode: none;
  }

  #div-2 {
    animation-fill-mode: forwards;
  }

  #div-3 {
    animation-fill-mode: backwards;
  }

  #div-4 {
    animation-fill-mode: both;
  }

  @keyframes move {
    from {
      transform: translateX(0);
      background-color: orange;
    }

    to {
      transform: translateX(300px);
      background-color: pink;
    }
  }
</style>

<script>
  const gui = new GUI();
  let divs = Array.from(document.querySelectorAll('.div'))
  let param = {
    pause: () => {
      Array.from(document.querySelectorAll('.div')).forEach(el => el.style['animation-play-state'] = 'paused')
    },
    run: () => {
      Array.from(document.querySelectorAll('.div')).forEach(el => el.style['animation-play-state'] = 'running')
    },
    restart: () => {
      for (let el of divs) {
        el.classList.remove('animation');
        setTimeout(() => { el.classList.add('animation'); }, 0);
      }
    }
  }
  for (let key in param) {
    gui.add(param, key)
  }
  Broadcast.once('render', () => {
    gui.destroy()
  })
</script>